Day12 NodeJS-Web Server I

2021 iThome 鐵人賽

DAY 12

自我挑戰組

學習NodeJS的30天系列第 12 篇

13th鐵人賽 node.js

chwk

2021-09-27 22:09:10

1930 瀏覽

分享至

今天的目標是：用NodeJS練習寫一個簡單的Web Server，所以會先介紹一下ＮodeJS中的http模組，然後再來看看要如何讓網頁在客戶端與伺服器端傳遞。

http模組

NodeJS的http模組的來源是名為http_parser的C語言函式庫，用於執行HTTP應用程式、處理請求(request)與回應(response)，其中的createServer()方法用來建立Server，藉由回呼函式提供監聽事件，在收到請求時處理請求內容及送出回應，而NodeJS中開發的程式碼透過http模組，不僅可以回應HTTP請求，也可以用在提出HTTP請求。

Node中的Web Server

Web Server意為網頁系統的伺服器，透過HTTP接收、處理及傳送網頁或其他檔案至客戶端(通常為瀏覽器)，這邊會以NodeJS實作簡易的Web Server。

寫一個Server

引用http模組，並使用createServer()建立一個新的Server，createServer()參數為包含有請求req及回應res兩個參數的回呼函式，在建立Server時要加上listen()以監聽指定IP位址及埠，範例中IP位址127.0.0.1為本機localhost的IP，而埠可自行指定。

let http = require("http");

http.createServer(function(req, res){
  
}).listen(1324, "127.0.0.1");

設定回呼函式執行內容與回應內容，首先以writeHead()定義回應的Status和Headers，再以sendData()或end()傳送內容，若以end()回傳內容則表示傳送完之後便結束這個工作程序。

http.createServer(function(req, res){
  res.writeHead(200, {"Content-Type": "text/plain"});  //回應狀態OK，資料類型MIME為純文字
  res.end("Hello~\n");
}).listen(1324, "127.0.0.1");

執行除錯時，程式會持續執行，等候瀏覽器傳送請求，此時以瀏覽器連線Server監聽IP位址，就會觸發回呼函式回應文字內容。

若在瀏覽器中開啟開發者工具，可以從網路>localhost>Header看到請求的資訊及Response可以看到回應的內容。

輸出html

這部份提到的html輸出包含靜態的html頁面及以placeholder保留變數在後續更新內容的html樣板~

html

建立一個名為index.html的html檔案。

<html>
    <head></head>
    <body>
        <h1>Hello To ITs</h1>
        <p>This is just an example</p>
    </body>
</html>

在主程式中引入http模組處理請求與回應，並引入fs模組以讀取檔案。

let http = require("http");
let fs = require("fs");

建立Server、監聽指定位址，並設定回傳內容。將html檔案的內容以fs模組的功能讀取為Buffer，再作為傳送的回應內容，在Header的部份要將contentType設定為text/html以讓執行引擎確認資料類型並轉換，若設定為text/plain會直接以純文字將html檔案內容傳送至瀏覽器。

http.createServer(function(req,res){
  let html = fs.readFileSync(`${__dirname}/index.html`);
  res.writeHead(200, {"contentType":"text/html"});
  res.end(html);
}).listen(1324,"127.0.0.1");

執行後以瀏覽器連線確認，html檔案以網頁物件呈現。

html樣板

將html檔案加入{DateMsg}參數作為placeholder。

<html>
  <head></head>
  <body>
    <h1>Hello To ITs</h1>
    <p>This is just an example</p>
    <p>{DateMsg}</p>	<!--加入placeholder-->
  </body>
</html>

在主程式部份，在readFileSync()方法加入編碼參數，把html檔案改以串流的方式讀取，以便修改內容。

http.createServer(function(req,res){
  let html = fs.readFileSync(`${__dirname}/index.html`, "utf8");  //加入編碼參數，html為Stream
  res.writeHead(200, {"contentType":"text/html"});
  res.end(html);
}).listen(1324,"127.0.0.1");

定義取代{DateMsg}的變數，更新html。

http.createServer(function(req,res){
  let html = fs.readFileSync(`${__dirname}/index.html`, "utf8");  //加入編碼參數，html為Stream
  let date = new Date();
  html = html.replace("{DateMsg}", date);
  res.writeHead(200, {"contentType":"text/html"});
  res.end(html);
}).listen(1324,"127.0.0.1");